<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <style>
        #navbar-example1{position:fixed;top:0;}
    </style>
</head>
<body class="body">

<div class="container">
  <div class="row">
    <div class="col-md-3 d-none d-md-block">
        <nav id="navbar-example1" class="navbar navbar-light bg-light">
            <nav  class="nav nav-pills flex-column">
                <a class="nav-link" href="#item-1">基础</a>
                <nav class="nav nav-pills flex-column">
                  <a class="nav-link ml-3 my-1" href="#title">标题</a>
                  <a class="nav-link ml-3 my-1" href="#textColor">文字颜色</a>
                  <a class="nav-link ml-3 my-1" href="#img">图片</a>
                  <a class="nav-link ml-3 my-1" href="#alerts">弹框</a>
                  <a class="nav-link ml-3 my-1" href="#badge">徽章</a>
                  <a class="nav-link ml-3 my-1" href="#breadcrumb">面包屑</a>
                  <a class="nav-link ml-3 my-1" href="#button">按钮</a>
                </nav>
                <a class="nav-link" href="#item-2">组件</a>
                <nav class="nav nav-pills flex-column">
                    <a class="nav-link ml-3 my-1" href="#form">表单</a>
                    <a class="nav-link ml-3 my-1" href="#card">卡片</a>
                    <a class="nav-link ml-3 my-1" href="#media">媒体对象</a>
                    <a class="nav-link ml-3 my-1" href="#modal">modal 弹框</a>
                </nav>
            </nav >
        </nav>
    </div>
    <section class="col-md-9">
        <h1 id="item-1">基础</h1>
        <div class="card my-4" id="title">
            <div class="card-header"><h3 class="text-primary">标题</h3></div>
            <div class="card-body">
                <h1>H1 <small>字体大小40px</small></h1>
                <h3>h3 <small>字体大小32px</small></h3>
                <h3>H3 <small>字体大小28px</small></h3>
                <h4>H4 <small>字体大小24px</small></h4>
                <h5>H5 <small>字体大小20px</small></h5>
                <h6>H6 <small>字体大小16px</small></h6>
            </div>
        </div>
        <div class="card my-4" id="textColor">
            <div class="card-header"><h3 class="text-primary">文字颜色</h3></div>
            <div class="card-body">
                <p class="text-primary">这是一段文字 - 主要的 #007bff</p>
                <p class="text-secondary">这是一段文字- 第二色 #868e96</p>
                <p class="text-success">这是一段文字 - 成功 #28a745</p>
                <p class="text-danger">这是一段文字 - 危险 #dc3545</p>
                <p class="text-warning">这是一段文字 - 警告 #ffc107</p>
                <p class="text-info">这是一段文字 - 信息 #17a2b8</p>
                <p class="text-light">这是一段文字 - 明亮的 #f8f9fa</p>
                <p class="text-dark">这是一段文字 - 黑暗的 #343a40</p>
            </div>
        </div>
        <div class="card my-4" id="img">
            <div class="card-header"><h3 class="text-primary">图片</h3></div>
            <div class="card-body">
                <p class="my-0">响应式图片</p>
                <img data-src="holder.js/100px250" class="img-fluid" alt="100%x250" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22691%22%20height%3D%22250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20691%20250%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15dedeb2fa3%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A35pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15dedeb2fa3%22%3E%3Crect%20width%3D%22691%22%20height%3D%22250%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22255.9921875%22%20y%3D%22140.6%22%3E691x250%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="height: 250px; width: 100%; display: block;">
                <p class="my-0">带边框图片</p>
                <img data-src="holder.js/200x200" class="img-thumbnail" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15dede2354d%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15dede2354d%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2275.5%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 200px; height: 200px;">
            </div>
        </div>
        <div class="card my-4" id="table">
            <div class="card-header"><h3 class="text-primary">表格</h3></div>
            <div class="card-body">
                <table class="table">
                  <thead>
                    <tr>
                      <th><font>＃</font></th>
                      <th><font>名字</font></th>
                      <th><font>姓</font></th>
                      <th><font>用户名</font></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row"><font>1</font></th>
                      <td><font>标记</font></td>
                      <td><font>玫瑰油</font></td>
                      <td><font>@mdo</font></td>
                    </tr>
                    <tr>
                      <th scope="row"><font>2</font></th>
                      <td><font>雅各</font></td>
                      <td><font>桑顿</font></td>
                      <td><font>@脂肪</font></td>
                    </tr>
                    <tr>
                      <th scope="row"><font>3</font></th>
                      <td><font>拉里</font></td>
                      <td><font>鸟</font></td>
                      <td><font>@推特</font></td>
                    </tr>
                  </tbody>
                </table>

                <p>条纹表格</p>
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th><font>＃</font></th>
                      <th><font>名字</font></th>
                      <th><font>姓</font></th>
                      <th><font>用户名</font></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row"><font>1</font></th>
                      <td><font>标记</font></td>
                      <td><font>玫瑰油</font></td>
                      <td><font>@mdo</font></td>
                    </tr>
                    <tr>
                      <th scope="row"><font>2</font></th>
                      <td><font>雅各</font></td>
                      <td><font>桑顿</font></td>
                      <td><font>@脂肪</font></td>
                    </tr>
                    <tr>
                      <th scope="row"><font>3</font></th>
                      <td><font>拉里</font></td>
                      <td><font>鸟</font></td>
                      <td><font>@推特</font></td>
                    </tr>
                  </tbody>
                </table>

                <p>边框表格</p>
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th><font>＃</font></th>
                      <th><font>名字</font></th>
                      <th><font>姓</font></th>
                      <th><font>用户名</font></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row"><font>1</font></th>
                      <td><font>标记</font></td>
                      <td><font>玫瑰油</font></td>
                      <td><font>@mdo</font></td>
                    </tr>
                    <tr>
                      <th scope="row"><font>2</font></th>
                      <td><font>标记</font></td>
                      <td><font>玫瑰油</font></td>
                      <td><font>@TwBootstrap</font></td>
                    </tr>
                    <tr>
                      <th scope="row"><font>3</font></th>
                      <td><font>雅各</font></td>
                      <td><font>桑顿</font></td>
                      <td><font>@脂肪</font></td>
                    </tr>
                    <tr>
                      <th scope="row"><font>4</font></th>
                      <td colspan="2"><font>拉里鸟</font></td>
                      <td><font>@推特</font></td>
                    </tr>
                  </tbody>
                </table>

                <p>hover 表格</p>
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th><font>＃</font></th>
                      <th><font>名字</font></th>
                      <th><font>姓</font></th>
                      <th><font>用户名</font></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row"><font>1</font></th>
                      <td><font>标记</font></td>
                      <td><font>玫瑰油</font></td>
                      <td><font>@mdo</font></td>
                    </tr>
                    <tr>
                      <th scope="row"><font>2</font></th>
                      <td><font>雅各</font></td>
                      <td><font>桑顿</font></td>
                      <td><font>@脂肪</font></td>
                    </tr>
                    <tr>
                      <th scope="row"><font>3</font></th>
                      <td colspan="2"><font>拉里鸟</font></td>
                      <td><font>@推特</font></td>
                    </tr>
                  </tbody>
                </table>

                <p>sm小表格</p>
                <table class="table table-sm">
                  <thead>
                    <tr>
                      <th><font>＃</font></th>
                      <th><font>名字</font></th>
                      <th><font>姓</font></th>
                      <th><font>用户名</font></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row"><font>1</font></th>
                      <td><font>标记</font></td>
                      <td><font>玫瑰油</font></td>
                      <td><font>@mdo</font></td>
                    </tr>
                    <tr>
                      <th scope="row"><font>2</font></th>
                      <td><font>雅各</font></td>
                      <td><font>桑顿</font></td>
                      <td><font>@脂肪</font></td>
                    </tr>
                    <tr>
                      <th scope="row"><font>3</font></th>
                      <td colspan="2"><font>拉里鸟</font></td>
                      <td><font>@推特</font></td>
                    </tr>
                  </tbody>
                </table>
            </div>
        </div>
        <div class="card my-4" id="alerts">
            <div class="card-header"><h3 class="text-primary">alerts 弹框</h3></div>
            <div class="card-body bd-example" data-example-id="">
                <div class="alert alert-primary" role="alert"><font>这是一个主要的警报 - 检查出来！</font></div>
                <div class="alert alert-secondary" role="alert"><font>这是一个二级警报 - 检查出来！</font></div>
                <div class="alert alert-success" role="alert"><font>这是一个成功的警报 - 检查出来！</font></div>
                <div class="alert alert-danger" role="alert"><font>这是一个危险的警报 - 检查出来！</font></div>
                <div class="alert alert-warning" role="alert"><font>这是一个警告提示 - 检查出来！</font></div>
                <div class="alert alert-info" role="alert"><font>这是一个信息警报 - 检查出来！</font></div>
                <div class="alert alert-light" role="alert"><font>这是一个轻微的警报 - 检查出来！</font></div>
                <div class="alert alert-dark" role="alert"><font>这是一个黑暗的警戒 - 检查出来！</font></div>

                <div class="alert alert-success" role="alert">
                  <h4 class="alert-heading"><font>做得好！</font></h4>
                  <p><font>嗯，你成功地阅读了这个重要的警报信息。</font><font>此示例文本将运行一段时间，以便您可以看到警报中的间距如何与此类内容配合使用。</font></p>
                  <hr>
                  <p class="mb-0"><font>每当你需要，一定要使用保证金工具来保持好东西和整洁。</font></p>
                </div>
            </div>
        </div>
        <div class="card my-4" id="badge">
            <div class="card-header"><h3 class="text-primary">badge徽章</h3></div>
            <div class="card-body bd-example" data-example-id="">
                <span class="badge badge-primary"><font>小学</font></span>
                <span class="badge badge-secondary"><font>中学</font></span>
                <span class="badge badge-success"><font>成功</font></span>
                <span class="badge badge-danger"><font>危险</font></span>
                <span class="badge badge-warning"><font>警告</font></span>
                <span class="badge badge-info"><font>信息</font></span>
                <span class="badge badge-light"><font>灯</font></span>
                <span class="badge badge-dark"><font>黑暗</font></span>

                <p class="my-0">药丸徽章</p>
                <span class="badge badge-pill badge-primary"><font>小学</font></span>
                <span class="badge badge-pill badge-secondary"><font>中学</font></span>
                <span class="badge badge-pill badge-success"><font>成功</font></span>
                <span class="badge badge-pill badge-danger"><font>危险</font></span>
                <span class="badge badge-pill badge-warning"><font>警告</font></span>
                <span class="badge badge-pill badge-info"><font>信息</font></span>
                <span class="badge badge-pill badge-light"><font>灯</font></span>
                <span class="badge badge-pill badge-dark"><font>黑暗</font></span>
            </div>
        </div>
        <div class="card my-4" id="breadcrumb">
            <div class="card-header"><h3 class="text-primary">面包屑</h3></div>
            <div class="card-body">
                <nav class="breadcrumb">
                  <a class="breadcrumb-item" href="#"><font>家庭</font></a>
                  <a class="breadcrumb-item" href="#"><font>图书馆</font></a>
                  <a class="breadcrumb-item" href="#"><font>数据</font></a>
                  <span class="breadcrumb-item active"><font>引导</font></span>
                </nav>
            </div>
        </div>
        <div class="card my-4" id="button">
            <div class="card-header"><h3 class="text-primary">按钮</h3></div>
            <div class="card-body">
                <div class="bd-example my-1" data-example-id="">
                    <button type="button" class="btn btn-outline-primary"><font>主</font></button>
                    <button type="button" class="btn btn-outline-secondary"><font>次要</font></button>
                    <button type="button" class="btn btn-outline-success"><font>成功</font></button>
                    <button type="button" class="btn btn-outline-danger"><font>危险</font></button>
                    <button type="button" class="btn btn-outline-warning"><font>警告</font></button>
                    <button type="button" class="btn btn-outline-info"><font>信息</font></button>
                    <button type="button" class="btn btn-outline-light"><font>光</font></button>
                    <button type="button" class="btn btn-outline-dark"><font>黑暗</font></button>
                </div>
                <div class="bd-example my-1" data-example-id="">
                    <button type="button" class="btn btn-primary btn-lg"><font>大按钮</font></button>
                    <button type="button" class="btn btn-secondary btn-lg"><font>大按钮</font></button>
                </div>
                <div class="bd-example my-1" data-example-id="">
                    <button type="button" class="btn btn-primary btn-sm"><font>小按钮</font></button>
                    <button type="button" class="btn btn-secondary btn-sm"><font>小按钮</font></button>
                </div>
                <div class="bd-example" data-example-id="">
                    <button type="button" class="btn btn-primary btn-lg btn-block"><font>块级按钮</font></button>
                    <button type="button" class="btn btn-secondary btn-lg btn-block"><font>块级按钮</font></button>
                </div>
            </div>
        </div>
        
        <h1 id="item-2">组件</h1>
        <div class="card my-4" id="form">
            <div class="card-header"><h3 class="text-primary">表单</h3></div>
            <div class="card-body">
                <form id="needs-validation" novalidate>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="inputEmail4" class="col-form-label"><font>电子邮件</font></label>
                            <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="inputPassword4" class="col-form-label"><font>密码</font></label>
                            <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                            <small id="passwordHelpBlock" class="form-text text-muted">您的密码必须为8-20个字符，包含字母和数字，不能包含空格，特殊字符或表情符号。</small>
                        </div>
                        <div class="form-group col">
                            <label for="inputEmail4" class="col-form-label"><font>省</font></label>
                            <select id="inputState" class="form-control"><option selected>请选择</option></select>
                        </div>
                        <div class="form-group col">
                            <label for="inputEmail4" class="col-form-label"><font>市</font></label>
                            <select id="inputState" class="form-control"><option selected>请选择</option></select>
                        </div>
                        <div class="form-group col">
                            <label for="inputEmail4" class="col-form-label"><font>区</font></label>
                            <select id="inputState" class="form-control"><option selected>请选择</option></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-form-label"><font>地址</font></label>
                        <input type="text" class="form-control" id="inputAddress" placeholder="请输入地址">
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-form-label"><font>数字</font></label>
                        <input type="number" class="form-control" id="inputNumber" placeholder="请输入数字">
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-form-label"><font>日期</font></label>
                        <input type="date" class="form-control" id="inputDate" placeholder="请选择日期">
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-form-label"><font>时间</font></label>
                        <input type="time" class="form-control" id="inputTime" placeholder="请选择时间">
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-form-label"><font>月份</font></label>
                        <input type="month" class="form-control" id="inputMonth" placeholder="请选择月份">
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-form-label"><font>周</font></label>
                        <input type="week" class="form-control" id="inputWeek" placeholder="请选择周">
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-form-label"><font>日期时间</font></label>
                        <input type="datetime-local" class="form-control" id="inputDatetime" placeholder="请选择日期时间">
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlSelect2"><font>示例多选</font></label>
                        <select multiple="" class="form-control" id="exampleFormControlSelect2">
                          <option><font>1</font></option>
                          <option><font>2</font></option>
                          <option><font>3</font></option>
                          <option><font>4</font></option>
                          <option><font>五</font></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-form-label"><font>多选项</font></label>
                        <div class="bd-example" data-example-id="">
                            <div class="form-check form-check-inline">
                              <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"><font> 1</font></label>
                            </div>
                            <div class="form-check form-check-inline">
                              <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"><font> 2</font></label>
                            </div>
                            <div class="form-check form-check-inline disabled">
                              <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled=""><font> 3</font></label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-form-label"><font>多选项</font></label>
                        <div class="bd-example" data-example-id="">
                            <div class="form-check form-check-inline">
                              <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"><font> 1</font></label>
                            </div>
                            <div class="form-check form-check-inline">
                              <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"><font> 2</font></label>
                            </div>
                            <div class="form-check form-check-inline disabled">
                              <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled=""><font> 3</font></label>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="form-group">
                        <label class="form-check-label"><input class="form-check-input" type="checkbox"> 记住我</label>
                    </div>
                    <div class="form-group row">
                      <div class="col-sm-10">
                          <button type="" class="btn btn-danger">取消</button>
                          <button type="submit" class="btn btn-success">保存</button>
                      </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="card my-4" id="card">
            <div class="card-header"><h3 class="text-primary">card卡片</h3></div>
            <div class="card-body">
                <div class="card" style="width: 20rem;">
                  <img class="card-img-top" data-src="holder.js/100px180/" alt="100％X180" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15deee81292%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15deee81292%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22118.0859375%22%20y%3D%2297.2%22%3E318x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
                  <div class="card-body">
                    <h4 class="card-title"><font>卡片标题</font></h4>
                    <p class="card-text"><font>一些快速的示例文本，建立在卡片标题上，并弥补卡片内容的大部分。</font></p>
                    <a href="#" class="btn btn-primary"><font>去一个地方</font></a>
                  </div>
                </div>
                <div class="card my-3" style="width: 20rem;">
                  <div class="card-body">
                    <h4 class="card-title"><font>卡片标题</font></h4>
                    <h6 class="card-subtitle mb-2 text-muted"><font>卡字字幕</font></h6>
                    <p class="card-text"><font>一些快速的示例文本，建立在卡片标题上，并弥补卡片内容的大部分。</font></p>
                    <a href="#" class="card-link"><font>卡片链接</font></a>
                    <a href="#" class="card-link"><font>另一个链接</font></a>
                  </div>
                </div>
                <div class="card my-3" style="width: 20rem;">
                  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="图像帽[100％x180]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15def01eb9e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15def01eb9e%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22109.203125%22%20y%3D%2297.2%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
                  <div class="card-body">
                    <h4 class="card-title"><font>卡片标题</font></h4>
                    <p class="card-text"><font>一些快速的示例文本，建立在卡片标题上，并弥补卡片内容的大部分。</font></p>
                  </div>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item"><font>Cras justo odio</font></li>
                    <li class="list-group-item"><font>大蟾蜍</font></li>
                    <li class="list-group-item"><font>前庭糜烂</font></li>
                  </ul>
                  <div class="card-body">
                    <a href="#" class="card-link"><font>卡链接</font></a>
                    <a href="#" class="card-link"><font>另一个链接</font></a>
                  </div>
                </div>
                <div class="card my-3">
                  <div class="card-header"><font>带页眉 页脚 卡片</font></div>
                  <div class="card-body">
                    <h4 class="card-title"><font>特别待遇</font></h4>
                    <p class="card-text"><font>以下支持文本作为额外内容的自然导入。</font></p>
                    <a href="#" class="btn btn-primary"><font>去一个地方</font></a>
                  </div>
                  <div class="card-footer text-muted"><font>2天前</font></div>
                </div>
            </div>
        </div>
        <div class="card my-4" id="media">
            <div class="card-header"><h3 class="text-primary">媒体对象列表</h3></div>
            <div class="card-body">
                <div class="media">
                  <img class="d-flex mr-3" src='data:image/svg+xml;charset=UTF-8,<svg%20width%3D"64"%20height%3D"64"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox%3D"0%200%2064%2064"%20preserveAspectRatio%3D"none"><defs><style%20type%3D"text%2Fcss">%23holder_15dedc5c9b9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20<%2Fstyle><%2Fdefs><g%20id%3D"holder_15dedc5c9b9"><rect%20width%3D"64"%20height%3D"64"%20fill%3D"%23777"><%2Frect><g><text%20x%3D"14.5"%20y%3D"36.5">64x64<%2Ftext><%2Fg><%2Fg><%2Fsvg>' alt="Generic placeholder image">
                  <div class="media-body">
                    <h5 class="mt-0">媒体标题</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                  </div>
                </div>

                <div class="media my-4">
                  <img class="d-flex mr-3" src='data:image/svg+xml;charset=UTF-8,<svg%20width%3D"64"%20height%3D"64"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox%3D"0%200%2064%2064"%20preserveAspectRatio%3D"none"><defs><style%20type%3D"text%2Fcss">%23holder_15dedc5c9b9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20<%2Fstyle><%2Fdefs><g%20id%3D"holder_15dedc5c9b9"><rect%20width%3D"64"%20height%3D"64"%20fill%3D"%23777"><%2Frect><g><text%20x%3D"14.5"%20y%3D"36.5">64x64<%2Ftext><%2Fg><%2Fg><%2Fsvg>' alt="Generic placeholder image">
                  <div class="media-body">
                    <h5 class="mt-0">媒体标题-嵌套</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

                    <div class="media mt-3">
                      <a class="d-flex pr-3" href="#">
                        <img src='data:image/svg+xml;charset=UTF-8,<svg%20width%3D"64"%20height%3D"64"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox%3D"0%200%2064%2064"%20preserveAspectRatio%3D"none"><defs><style%20type%3D"text%2Fcss">%23holder_15dedc5c9b9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20<%2Fstyle><%2Fdefs><g%20id%3D"holder_15dedc5c9b9"><rect%20width%3D"64"%20height%3D"64"%20fill%3D"%23777"><%2Frect><g><text%20x%3D"14.5"%20y%3D"36.5">64x64<%2Ftext><%2Fg><%2Fg><%2Fsvg>' alt="Generic placeholder image">
                      </a>
                      <div class="media-body">
                        <h5 class="mt-0">媒体标题-嵌套</h5>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                      </div>
                    </div>
                  </div>
                </div>

                <div class="media">
                  <img class="d-flex align-self-center mr-3" src='data:image/svg+xml;charset=UTF-8,<svg%20width%3D"64"%20height%3D"64"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox%3D"0%200%2064%2064"%20preserveAspectRatio%3D"none"><defs><style%20type%3D"text%2Fcss">%23holder_15dedc5c9b9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20<%2Fstyle><%2Fdefs><g%20id%3D"holder_15dedc5c9b9"><rect%20width%3D"64"%20height%3D"64"%20fill%3D"%23777"><%2Frect><g><text%20x%3D"14.5"%20y%3D"36.5">64x64<%2Ftext><%2Fg><%2Fg><%2Fsvg>' alt="Generic placeholder image">
                  <div class="media-body">
                    <h5 class="mt-0">中心对齐的媒体</h5>
                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                  </div>
                </div>

                <div class="media my-4">
                  <img class="d-flex align-self-end mr-3" src='data:image/svg+xml;charset=UTF-8,<svg%20width%3D"64"%20height%3D"64"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox%3D"0%200%2064%2064"%20preserveAspectRatio%3D"none"><defs><style%20type%3D"text%2Fcss">%23holder_15dedc5c9b9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20<%2Fstyle><%2Fdefs><g%20id%3D"holder_15dedc5c9b9"><rect%20width%3D"64"%20height%3D"64"%20fill%3D"%23777"><%2Frect><g><text%20x%3D"14.5"%20y%3D"36.5">64x64<%2Ftext><%2Fg><%2Fg><%2Fsvg>' alt="Generic placeholder image">
                  <div class="media-body">
                    <h5 class="mt-0">底部对齐的媒体</h5>
                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                  </div>
                </div>

                <div class="media">
                  <div class="media-body">
                    <h5 class="mt-0 mb-1">媒体对象</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                  </div>
                  <img class="d-flex ml-3" src='data:image/svg+xml;charset=UTF-8,<svg%20width%3D"64"%20height%3D"64"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox%3D"0%200%2064%2064"%20preserveAspectRatio%3D"none"><defs><style%20type%3D"text%2Fcss">%23holder_15dedc5c9b9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20<%2Fstyle><%2Fdefs><g%20id%3D"holder_15dedc5c9b9"><rect%20width%3D"64"%20height%3D"64"%20fill%3D"%23777"><%2Frect><g><text%20x%3D"14.5"%20y%3D"36.5">64x64<%2Ftext><%2Fg><%2Fg><%2Fsvg>' alt="Generic placeholder image">
                </div>
            </div>
        </div>
        <div class="card my-4" id="modal">
            <div class="card-header"><h3 class="text-primary">modal 弹框</h3></div>
            <div class="card-body">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLive"><font>启动演示模态</font></button>
                <div id="exampleModalLive" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLiveLabel"><font>模态标题</font></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true"><font>×</font></span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p><font>Woohoo，你正在以一种模式阅读这个文本！</font></p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><font>关</font></button>
                        <button type="button" class="btn btn-primary"><font>保存更改</font></button>
                      </div>
                    </div>
                  </div>
                </div>

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalPopovers"><font>工具提示和插件</font></button>
                <div id="exampleModalPopovers" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalPopoversLabel"><font>模态标题</font></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true"><font>×</font></span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <h5><font>Popover在一个模态</font></h5>
                        <p><font>此</font><a href="#" role="button" class="btn btn-secondary popover-test" title="" data-content="Popover body content is set in this attribute." data-container="#exampleModalPopovers" data-original-title="Popover title"><font>按钮</font></a><font>在点击时触发一个popover。</font></p>
                        <hr>
                        <h5><font>工具提示模式</font></h5>
                        <p><a href="#" class="tooltip-test" title="" data-container="#exampleModalPopovers" data-original-title="Tooltip"><font>此链接</font></a><font>和</font><a href="#" class="tooltip-test" title="" data-container="#exampleModalPopovers" data-original-title="Tooltip"><font>该链接</font></a><font>具有悬停的工具提示。</font></p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><font>关</font></button>
                        <button type="button" class="btn btn-primary"><font>保存更改</font></button>
                      </div>
                    </div>
                  </div>
                </div>

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo"><font>表单modal</font></button>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel"><font>向@mdo发送新消息</font></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true"><font>×</font></span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <form>
                          <div class="form-group">
                            <label for="recipient-name" class="form-control-label"><font>接受者：</font></label>
                            <input type="text" class="form-control" id="recipient-name">
                          </div>
                          <div class="form-group">
                            <label for="message-text" class="form-control-label"><font>信息：</font></label>
                            <textarea class="form-control" id="message-text"></textarea>
                          </div>
                        </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><font>关</font></button>
                        <button type="button" class="btn btn-primary"><font>发信息</font></button>
                      </div>
                    </div>
                  </div>
                </div>

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg"><font>大modal</font></button>
                <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content">

                      <div class="modal-header">
                        <h4 class="modal-title" id="myLargeModalLabel"><font>大模态</font></h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true"><font>×</font></span>
                        </button>
                      </div>
                      <div class="modal-body"><font>
                        ...
                      </font></div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
        <div class="card my-4">
            <div class="card-header"><h3 class="text-primary"> </h3></div>
            <div class="card-body">
                
            </div>
        </div>
        
        <div class="card my-4">
            <div class="card-header"><h3 class="text-primary"> </h3></div>
            <div class="card-body">
                
            </div>
        </div>
    </section>
  </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script>
$('body').scrollspy({ target: '#navbar-example1' })
    
$(function(){
  "use strict";
  window.addEventListener("load", function() {
    var form = document.getElementById("needs-validation");
    form.addEventListener("submit", function(event) {
      if (form.checkValidity() == false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add("was-validated");
    }, false);
  }, false);
})
</script>
</body>
</html>